import { Fragment } from '@/components/Fragment'; 
import { Divider, View, Flex, Text } from '@aws-amplify/ui-react';
import { DividerDemo } from './demo';
import { Example, ExampleCode } from '@/components/Example';
import { ComponentStyleDisplay } from '@/components/ComponentStyleDisplay';
import ThemeExample from '@/components/ThemeExample.mdx';
import {
  DefaultDividerExample,
  HorizontalDividerExample,
  VerticalDividerExample,
  DividerSizesExample,
  DividerStylePropsExample,
  DividerClassNameExample,
  DividerThemeExample,
  LabelExample,
} from './examples';

## Demo

<DividerDemo />

## Usage

Import the Divider component and place it between components you want separated. Most of the time you will want to use the divider in a [`<Flex>`](../components/flex) component.

<Example>
  <DefaultDividerExample />
  <ExampleCode>

```jsx file=./examples/DefaultDividerExample.tsx

```

  </ExampleCode>
</Example>

### Orientation

**Horizontal (default)**

<Example>
  <HorizontalDividerExample />
  <ExampleCode>

```jsx file=./examples/HorizontalDividerExample.tsx

```

  </ExampleCode>
</Example>

**Vertical**

<Example>
  <VerticalDividerExample />
  <ExampleCode>

```jsx file=./examples/VerticalDividerExample.tsx

```

  </ExampleCode>
</Example>

### Sizes

Available options are `small`, `large`, and none (default).

<Example>
  <DividerSizesExample />
  <ExampleCode>

```jsx file=./examples/DividerSizesExample.tsx

```

  </ExampleCode>
</Example>

### Label

<Example>
  <LabelExample />
  <ExampleCode>

```jsx file=./examples/LabelExample.tsx

```

  </ExampleCode>
</Example>

## Customization

<ThemeExample component="Divider">
  <Example>
    <DividerThemeExample />
    
    <ExampleCode>

    ```tsx file=./examples/DividerThemeExample.tsx

    ```

    </ExampleCode>
  </Example>
</ThemeExample>

### CSS

You can set the Amplify CSS variables or use the built-in `.amplify-divider` class to customize all Dividers in your application as well.

<Example>
  <Divider className="border-style-override" />
  <ExampleCode>

```css
/* styles.css */
[data-amplify-theme] {
  --amplify-components-divider-border-style: dashed;
}
/* OR */
.amplify-divider {
  border-style: dashed;
}
```

</ExampleCode>
</Example>

To replace _all_ the Divider styling, unset it:

```css
.amplify-divider {
  all: unset;
  /* Add your styling here*/
}
```

### Target classes

<ComponentStyleDisplay componentName="Divider" />

### Local styling

To override styling on a specific Divider, you can use (in order of increasing specificity): a class selector, data attributes, or style props.

_Using a class selector:_

<Example>
  <DividerClassNameExample />
  <ExampleCode>

```jsx file=./examples/DividerClassNameExample.tsx

```

  </ExampleCode>
</Example>

_Using style props:_

<Example>
  <DividerStylePropsExample />
  <ExampleCode>

```jsx file=./examples/DividerStylePropsExample.tsx

```

  </ExampleCode>
</Example>

### Default theme

```ts file=../../../../../../packages/ui/src/theme/tokens/components/divider.ts

```